<script setup lang="ts">
    import { ref, onMounted, onUnmounted } from 'vue'
    import { useRoute, useRouter } from 'vue-router'
    import { productDetailAPIRes } from '../../api'

    const { query } = useRoute()
    const router = useRouter()
    const scroll = ref(0)
    const datail = ref<any>({})

    const getDetail = async () => {
        const { data } = await productDetailAPIRes({ id: query.id })
        datail.value = data
    }
    const handleScroll = () => {
        scroll.value = document.documentElement.scrollTop || document.body.scrollTop
    }

    onMounted(() => {
        getDetail()
        window.addEventListener("scroll", handleScroll)
    })
    onUnmounted(() => {
        window.removeEventListener('scroll', handleScroll)
    })
</script>

<template>
    <van-nav-bar left-arrow fixed safe-area-inset-top :border="false" :title="scroll < 50 ? '' : `${datail.name}`" :class="scroll < 50 ? 'bg-none' : ''" @click-left="router.back()" />
    <van-image width="100%" height="12.5rem" fit="cover" :src="datail.productImg" />
    <div class="relative mt-[-40px] mb-3 px-4 py-2.5 rounded-t-2xl bg-white">
        <div class="flex items-center justify-between p-2.5 border-b border-slate-300 border-dashed text-xs text-[#666]">
            <div><van-icon name="shield-o" :size="14" /> 正规安全</div>
            <div><van-icon name="shield-o" :size="14" /> 平台认证</div>
            <div><van-icon name="shield-o" :size="14" /> 实名认证</div>
            <div><van-icon name="shield-o" :size="14" /> 收费透明</div>
        </div>
        <div class="flex items-center justify-between mt-2.5">
            <div class="text-base font-bold text-[#232a24]">{{ datail.name }}</div>
            <div class="text-sm text-[#999]"><van-icon name="underway-o" color="#7C6186" :size="14" /> {{ datail.duration }}分钟</div>
        </div>
        <div class="my-1 text-sm text-[#999]">{{ datail.describe }}</div>
        <div class="text-base text-[#ff2404]">¥ <span class="text-lg font-bold">{{ datail.price && datail.price.toFixed(2) }}</span></div>
    </div>
    <van-tabs color="#7C6186">
        <van-tab title="项目介绍">
            <div class="px-4 py-2.5 bg-white text-sm text-[#555] mb-2.5">
                <div v-if="datail.introduce" v-html="datail.introduce" />
                <van-empty v-else image-size="100" description="暂无内容" />
            </div>
        </van-tab>
        <van-tab title="下单须知">
            <div class="px-4 py-2.5 bg-white text-sm text-[#555] mb-2.5">
                <p>今喜到家提供的属于养生类按摩服务，非医疗服务，如需治疗的，请到医疗机构进行就诊。</p>
                <p>今喜到家只提供正规的养生类按摩服务，对于客户无理要求及行为、存在不适宜接受按摩服务的状态（醉酒等）、存在违法行为 (如：正在进行黄、赌、毒、打架斗殴、威胁他人人身安全等一切违法行为)，理疗师有权拒绝，产生的车费需客户自行承担。</p>
                <br>
                <p>【严禁私下交易】</p>
                <p>1.今喜到家平台为订单服务信息提供方，对您与理疗师之间因订单服务产生纠纷会全力协助配合。</p>
                <p>2.若您私下交易，由此您和理疗师之间产生的一切纠纷与本平台无关。</p>
                <br>
                <p>【退款提示】</p>
                <p>1.如您在下单后需取消订单，理疗师到达客户指定服务地点，因客户个人原因联系不上，理疗师等待超过10分钟，理疗师可离场，平台将扣除车费，只退还订单项目金额。</p>
                <p>2.理疗师到达指定地址后，正常开启服务工作，0至10分钟（含10分钟），因客户个人原因终止服务的，平台扣除20%的项目服务费，剩余退回；理疗师服务时间达到10分钟以上（从11分钟起），因客户个人原因终止服务的，平台不予退还服务费。</p>
                <p>3.您在接受相应服务后向理疗师提出退款要求的，非因理疗师服务质量存在严重瑕疵，理疗师不提供退款服务。</p>
                <p>4.平台退款会原路退回，退款金额会在1-3个工作日内退还到支付账号。</p>
                <br>
                <p>【隐私保护】</p>
                <p>请您注意，我们非常重视号码隐私保护，对理疗师隐藏您的真实手机号，保护您的隐私安全。通信过程，不会暴露您的真实手机号。我们通过设置虚拟号码（中间号码）等措施来保障您的号码隐私。</p>
                <p>1.使用隐私号码保护订单，在接听和拨打电话的通话过程中都可能会被录音。</p>
                <p>2.经您授权，当用户、理疗师间出现服务纠纷时，平台可调取并使用录音信息作为解决纠纷的参考依据;另为预防风险保护各方安全，系统可能会对隐私号录音进行技术分析。</p>
                <p>3.平台将切实保障通信双方的隐私安全，录音信息将上传至今喜到家平台服务器保存，各方无法自行下载、调取；除下述规定的情况外（A.事先获取您明确的同意或授权；B.为履行法定义务所必需:根据法律法规的规定、诉讼争议解决需要，或行政、司法等有权机关依法提出的要求；C.在我们需要接受来自其他主体的尽职调查时，我们会把您的信息提供给必要的主体，但我们会通过和这些主体签署保密协议等方式要求其对您的个人信息采取保密措施。)平台不会将录音信息提供给任何人。</p>
                <p>4.录音信息保存期限按照法律法规所规定的保存期限及为实现个人信息处理目的所必需的期限内存储您的个人信息。</p>
                <p>5.受网络状态稳定性等限制，极端情况下，可能会出现无法录音或部分录音无法听清等录音失败，无法存储等储存失败情形。如遇此类情形，平台无需承担责任。</p>
            </div>
        </van-tab>
        <van-tab title="禁忌说明">
            <div class="px-4 py-2.5 bg-white text-sm text-[#555] mb-2.5">
                <p class="mb-2">1.饭后半小时不宜进行按摩</p>
                <p class="mb-2">2.女性经期或妊娠期不宜做腹部、腰部按摩</p>
                <p class="mb-2">3.骨折复位、开放性骨折，体内有金属固定物禁用</p>
                <p class="mb-2">4.感染性疾病、传染性疾病、皮肤病、皮肤破损者禁用</p>
                <p class="mb-2">5.需要外科手术着禁用</p>
            </div>
        </van-tab>
    </van-tabs>
    <div class="h-14 pt-2.5 van-safe-area-bottom box-content">
        <div class="mb-2.5 h-full"></div>
    </div>
    <div class="fixed bottom-0 left-0 right-0 pt-2.5 px-8 van-safe-area-bottom border-t bg-white">
        <van-button block color="#7C6186" class="mb-2.5" :to="`/select/tech?id=${datail.id}`">选择理疗师</van-button>
    </div>
</template>